.panel.exchange__panel {
    background: linear-gradient(145deg, #1e1e2d, #2a2a40); /* Darker gradient for a modern look */
    border: 1px solid #333354; /* Subtle border for depth */
    color: #ffffff;
    padding: 20px;
    border-radius: 15px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); 
    margin: 20px auto;
    max-width: 800px;
}

.panel__text, .title2 {
    color: #b3b3cc; /* Lighter gray for better readability */
    font-size: 1.2em;
    font-family: 'Poppins', sans-serif; /* Modern font */
    letter-spacing: 0.05em; /* Spacing for readability */
    text-transform: uppercase; /* Stylistic choice for titles */
}

.panel__text.exchange__panel-step-text {
    font-size: 1.5em; /* Slightly larger to stand out */
    font-weight: bold;
    color: #FFD700; /* Gold color for prominence */
    margin-bottom: 0.5em; /* Ensures spacing between the title and the rest of the content */
    text-align: center; /* Centers the title for better visual alignment */
    text-shadow: none; /* Removes glow for cleaner appearance */
    animation: none; /* Disables the animation for a stable look */
    font-family: 'Poppins', sans-serif; /* Modern font */
    letter-spacing: 0.05em; /* Spacing for readability */
    text-transform: uppercase; /* Stylistic choice for titles */
}

input[type="number"], input[type="text"], input[type="email"], #cryptomus-exchange-now {
    background-color: #2b2b3d; /* Matching dark gray */
    color: #ffffff;
    border: 1px solid #444466;
    padding: 12px;
    border-radius: 8px;
    width: 100%;
    margin-bottom: 15px;
    font-family: 'Poppins', sans-serif;
    font-size: 1em;
}

.crypto-icon {
    height: 20px; /* Adjust the height as needed */
    width: auto;
    vertical-align: middle;
    margin-right: 5px; /* Space between the icon and the text */
}

.panel__step.exchange__panel-step img {
    height: 40px;
    margin-bottom: 5px;
    width: auto;
    display: block; /* Ensures the image is centered if needed */
    margin: 0 auto; /* Center the image horizontally */
}

.panel__top {
    margin-bottom: 15px;
}

.panel__wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Centers the title text within the wrapper */
    flex-direction: column; /* Stacks elements vertically for better focus on title */
}

.panel__text {
    font-size: 16px;
    color: #b3b3cc; /* Light Gray */
}

.panel__line {
    border-bottom: 1px solid #444466;
    margin-bottom: 15px;
}

.title2 {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 15px;
}

/* Dropdown and Input Styling */
.select, .input {
    background-color: #2b2b3d;
    border: 1px solid #444466;
    padding: 10px;
    border-radius: 8px;
    color: white;
    margin-bottom: 10px;
    width: 100%;
}

.select__header, .select__body {
    position: relative;
}

.select__current, .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.input__wrapper {
    display: flex;
    align-items: center;
}

.input__text {
    margin-left: 10px;
    color: #b3b3cc;
}

.custom-select {
    position: relative;
    display: flex;
    flex-direction: column;
}

.custom-select__trigger {
    background-color: #3a3a55; /* Darker shade for contrast */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    border: 1px solid #444466;
    padding: 12px;
    border-radius: 8px;
    color: #ffffff;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.custom-select__trigger span {
    display: flex;
    align-items: center;
}

.custom-select__trigger img {
    margin-right: 5px; /* Adjust space between icon and text */
    height: 20px; /* Adjust based on your preference */
}

.custom-options {
    background: #2b2b3d; /* Dark background for options */
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    position: absolute;
    display: none;
    color: white;
    top: 100%;
    left: 0;
    right: 0;
    border: 1px solid #444466;
    border-top: none;
    z-index: 2;
    border-radius: 8px;
    overflow: hidden;
    padding: 10px;
}

.custom-option {
    padding: 10px;
    cursor: pointer;
    transition: background-color 0.3s;
    font-family: 'Poppins', sans-serif;
}

.custom-option:hover {
    background-color: #444466;
}

.custom-select.open .custom-options {
    display: flex;
    flex-direction: column;
    background-color: #2b2b3d; /* Matching dark gray for contrast */
    color: #ffffff;
    border-radius: 8px;
}

.arrow {
    width: 10px;
    height: 10px;
    border-top: 2px solid white;
    border-right: 2px solid white;
    transform: rotate(45deg);
    transition: transform 0.3s;
}

.custom-select.open .arrow {
    transform: rotate(-135deg);
}

.select__current, .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}

.input__wrapper {
    display: flex;
    align-items: center;
}

.input__text {
    margin-left: 10px;
    color: #b3b3cc;
}

/* Custom Select Dropdown */
.custom-select-wrapper {
    position: relative;
    user-select: none;
    width: 100%;
}

/* Button Styling */
#cryptomus-exchange-now {
    background-color: #5c5c8a;   /* Medium purple */
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Enhanced shadow for depth */
    transition: all 0.3s ease;
    font-weight: 600;
    width: 100%;
    text-align: center;
}

#cryptomus-exchange-now:hover {
    background-color: #4a4a72; /* Slightly darker shade on hover */
    transform: translateY(-2px); /* Lift effect */
}

#cryptomus-exchange-now:disabled {
    background-color: #333;
    cursor: not-allowed;
}

/* Error Message Styling */
#cryptomus-error-message {
    color: red;
    margin-top: 10px;
}

/* Recaptcha Styling */
#cryptomus-recaptcha {
    margin-top: 15px;
}

.terms-of-service {
    margin-top: 10px; /* Adjust space between the button and text */
    font-size: 12px; /* Adjust the font size as needed */
    text-align: center; /* Center the text */
    color: #b3b3cc; /* Text color */
}

.terms-of-service a {
    text-decoration: none; /* Removes underline from the link */
    color: #5c5c8a; /* Link color matching the button */
    transition: color 0.3s ease; /* Smooth transition for hover */
}

.terms-of-service a:hover {
    text-decoration: underline; /* Adds underline on hover for better user interaction */
    color: #4a4a72; /* Darker shade on hover */
}

/* New Elements and Enhancements */
.exchange__info, .terms-of-service {
    background: rgba(255, 255, 255, 0.05); /* Slight overlay for separation */
    padding: 10px;
    border-radius: 8px;
}

.exchange__instructions {
    background-color: #3a3a55; /* Slightly darker than the panel for contrast */
    color: #b3b3cc; /* Soft light color for readability */
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    border-left: 4px solid #FFD700; /* Highlight color for importance */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    font-size: 0.95em; /* Slightly smaller font size for distinction */
    text-align: left; /* Align text to the left for readability */
    line-height: 1.6; /* Improved line spacing for readability */
}

.exchange__instructions p {
    color: #FFD700; /* Use the highlight color for the introductory text */
    font-weight: bold; /* Make the introductory text stand out */
}

.exchange__instructions ul {
    list-style: inside square; /* Modern list style */
}

.exchange__instructions li {
    margin-bottom: 10px; /* Increase spacing between list items */
}

/* Adjust the font size for smaller screens to ensure responsiveness */
@media (max-width: 768px) {
    .exchange__instructions {
        font-size: 0.9em;
    }
}

/* Responsiveness and Additional Styling */
@media (max-width: 768px) {
    .panel__wrapper, .exchange__panel-bottom-wrapper {
        flex-direction: column;
        align-items: center; /* Center align for mobile */
    }

    .exchange__panel-email, .exchange__panel-start, .exchange__panel-end {
        width: 100%; /* Full width for mobile inputs */
    }

    .custom-select__trigger, input[type="number"], input[type="text"], input[type="email"] {
        margin-bottom: 10px; /* Spacing for mobile */
    }
}

@media (max-width: 768px) {
    .panel__top .exchange__panel-step-text {
        font-size: 1.2em; /* Adjusts size for smaller screens */
    }
}